/*
 * Author: Alvin
 * Modified By: Alvin
 * Created Date: 2023-10-26 14:35:12
 * Last Modified: 2023-10-26 16:58:04
 * Description:
 */
import 'package:bruno/bruno.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:yt_devops/components/app_permission/permission_widget.dart';
import 'package:yt_devops/components/gaps.dart';
import 'package:yt_devops/components/log_utils.dart';
import 'package:yt_devops/components/text_width.dart';
import 'package:yt_devops/components/yt_text_style.dart';
import 'package:yt_devops/pages/devices/device_list/device_list_model.dart';
import 'package:yt_devops/components/my_gesture_detector.dart';
import 'package:yt_devops/resources/str_res_keys.dart';
import 'package:yt_devops/styles/styles.dart';
import 'package:yt_devops/utils/constants/permission_page_constant.dart';

class SiteObserverListItemWidget extends StatelessWidget {
  final String title;
  final List<dynamic>? dataList;
  final bool? isShowEdit; //是否展示编辑按钮
  final double marginHeight;
  final void Function(List<dynamic> int)? onItemTaped;
  final void Function()? editClick;

  const SiteObserverListItemWidget(this.dataList, this.isShowEdit,
      {this.onItemTaped,
      super.key,
      required this.title,
      this.editClick,
      this.marginHeight = 10});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(16.w, 0, 16.w, 0),
      margin: EdgeInsets.only(top: marginHeight,left: 16,right: 16),
      clipBehavior: Clip.hardEdge,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        color: Colour.white,
      ),
      child: Column(
        children: [
          Visibility(
            visible: marginHeight == 0,
            child: Container(
              height: 1,
              color: Colour.dividerColor,
            ),
          ),
          SizedBox(
            height: 50,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  title,
                  style: ytTextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w500,
                      color: (isShowEdit != null && isShowEdit! == true)
                          ? Colour.mainTextColor
                          : Colour.labelTextColor),
                  overflow: TextOverflow.ellipsis,
                ),
            PermissionWidget(permissionStringList: const [PermissionConstant.homeSiteManageSettingMonitorSettingSave],
              child:Visibility(
                    visible: (isShowEdit != null && isShowEdit! == true),
                    child: MyGestureDetector(
                        onTap: () {
                          Log.d('dataListdataList==' + dataList.toString());
                          if (onItemTaped != null) {
                            onItemTaped!(dataList ?? []);
                          }
                        },
                        child: Text(ResKey.siteSettingObserverObserverPoint.tr,
                            style: TextStyle(
                                color: Colour.primaryColor, fontSize: 13.sp)))))
              ],
            ),
          ),
          dataList != null
              ? SizedBox(
                  // height: dataList!.length * 140,
                  child: ListView.builder(
                    physics: const NeverScrollableScrollPhysics(),
                    padding: EdgeInsets.zero,
                    shrinkWrap: true,
                    itemBuilder: (BuildContext context, int index) {
                      var map = dataList![index];
                      return _itemWidget(map, editClick);
                    },
                    itemCount: dataList!.length,
                  ),
                )
              : Container()
        ],
      ),
    );
  }

  _itemWidget(Map map, Function()? editClick) {
    return Container(
      margin: const EdgeInsets.only(bottom: 16),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(
                width: 110,
                height: 20,
                child: Text('${ResKey.deviceName.tr}:',
                    style: ytTextStyle(
                        color: Colour.lightTextColor, fontSize: 13)),
              ),
              // Text('${map['deviceName']}:',
              //     style: TextStyle(
              //         color: Colour.lightTextColor, fontSize: 13.sp)),
              // Gaps.hGap8,
              Expanded(
                  child: Text(
                map['deviceName'] == null ? '' : map['deviceName'].toString(),
                maxLines: 3,
                style: ytTextStyle(
                  color: Colour.mainTextColor,
                  fontSize: 13,
                ),
                overflow: TextOverflow.ellipsis,
              )),
            ],
          ),
          Gaps.vGap4,
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(
                width: 114,
                height: 20,
                child: Text('${ResKey.deviceSn.tr}:',
                    style: ytTextStyle(
                      color: Colour.lightTextColor,
                      fontSize: 13,
                    )),
              ),
              // Text('${map['deviceName']}:',
              //     style: TextStyle(
              //         color: Colour.lightTextColor, fontSize: 13.sp)),
              // Gaps.hGap8,
              Text(
                map['deviceSN'] == null ? '' : map['deviceSN'].toString(),
                maxLines: 3,
                style: ytTextStyle(
                  color: Colour.mainTextColor,
                  fontSize: 13,
                ),
                overflow: TextOverflow.ellipsis,
              ),
            ],
          ),
          Gaps.vGap4,
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(
                width: 114,
                height: 20,
                child: Text('${ResKey.siteSettingObserverObserverPoint.tr}:',
                    style: ytTextStyle(
                        color: Colour.lightTextColor, fontSize: 14)),
              ),
              // Text('${map['deviceName']}:',
              //     style: TextStyle(
              //         color: Colour.lightTextColor, fontSize: 13.sp)),
              // Gaps.hGap8,
              Expanded(
                  child: Text(
                map['deviceName'] == null ? '' : map['paramName'].toString(),
                maxLines: 3,
                style: ytTextStyle(
                  color: Colour.mainTextColor,
                  fontSize: 13,
                ),
                overflow: TextOverflow.ellipsis,
              )),
            ],
          ),
          _editeWidget(map, editClick)
        ],
      ),
    );
  }

  ///最大功率编辑视图
  _editeWidget(Map map, Function()? editClick) {
    var controller = TextEditingController();
    controller.text = map['maximumLoadOfTransformer'] != null &&
            map['maximumLoadOfTransformer']['value'] != null
        ? map['maximumLoadOfTransformer']['value'].toString()
        : '0.00';
    bool visibility = map['maximumLoadOfTransformer'] != null &&
            map['maximumLoadOfTransformer']['editable'] != null &&
            map['maximumLoadOfTransformer']['editable'].toString() == '1'
        ? true
        : false;
    return Visibility(
        visible: visibility,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(
              width: 114,
              height: 20,
              child: Text('${'device.maximumLoadOfTransformer'.tr}:',
                  style:
                      ytTextStyle(color: Colour.lightTextColor, fontSize: 13)),
            ),
            // Text('${map['deviceName']}:',
            //     style: TextStyle(
            //         color: Colour.lightTextColor, fontSize: 13.sp)),
            // Gaps.hGap8,
            map['isEdit'] != null && map['isEdit'] == true
                ? Container(
                    height: 32,
                    width: 106,
                    decoration: BoxDecoration(
                      color: Colour.backgroundColor,
                      borderRadius: BorderRadius.circular(4),
                    ),
                    alignment: Alignment.center,
                    child: TextField(
                      textAlign: TextAlign.center,
                      // textAlignVertical:TextAlignVertical.center,
                      maxLines: 1,
                      style: ytTextStyle(
                        fontSize: 12,
                        color: Colour.mainTextColor,
                      ).copyWith(textBaseline: TextBaseline.alphabetic),
                      controller: controller,
                      keyboardType:
                          const TextInputType.numberWithOptions(decimal: true),
                      decoration: InputDecoration(
                        border: InputBorder.none,
                        contentPadding:
                            const EdgeInsets.only(top: 0, bottom: 12),
                        hintText: ResKey.plsInput.tr,
                        enabled: true,
                        hintStyle: ytTextStyle(
                          fontSize: 13,
                          color: Colour.hintTextColor,
                          fontWeight: FontWeight.normal,
                        ),
                      ),

                      onChanged: (String str) {
                        if (map['maximumLoadOfTransformer'] != null) {
                          map['maximumLoadOfTransformer']['value'] = str;
                        }
                        Log.d('map==1111===' + map.toString());
                      },
                    ))
                : Text(
                    map['maximumLoadOfTransformer'] != null &&
                            map['maximumLoadOfTransformer']['value'] != null
                        ? map['maximumLoadOfTransformer']['value'].toString()
                        : '0.00',
                    maxLines: 3,
                    style: ytTextStyle(
                      color: Colour.mainTextColor,
                      fontSize: 13,
                    ),
                    overflow: TextOverflow.ellipsis,
                  ),
            Text(
              'kW',
              style: ytTextStyle(
                color: Colour.mainTextColor,
                fontSize: 13,
              ),
              overflow: TextOverflow.ellipsis,
            ),
            const Spacer(),
            Visibility(
                visible: map['isEdit'] != null && map['isEdit'] == false,
                child: GestureDetector(
                    onTap: () {
                      if (map['isEdit'] != null) {
                        map['isEdit'] = true;
                      }
                      if (editClick != null) {
                        Log.d('editClick===000===' + map.toString());
                        editClick();
                      }
                    },
                    child: Container(
                      margin: const EdgeInsets.only(top: 4, right: 8),
                      child: Image.asset('assets/images/site_monitor_edit.png'),
                    )))
          ],
        ));
  }
}
